<template>
    <div class="app-container">
        <header>
            <div style="transform: translateY(-10px);">
                <el-divider content-position="left">tips:先新增模版后勾选发送,如果模版存在直接勾选即可发送,以及误操作发送也可勾选后取消发送</el-divider>
            </div>
            <div>
                <el-form :model="formData" label-width="70px" :label-position="formData.labelPosition" size="small">
                    <el-form-item label="所在区域">
                        <el-select v-model="formData.region" clearable placeholder="请选择所在区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="驾校名称">
                        <el-select v-model="formData.JxName" clearable placeholder="请选择驾校名称">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="账号名称">
                        <el-select v-model="formData.AcountName" clearable placeholder="请选择账号名称">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="网址链接">
                        <el-input v-model="formData.url" placeholder="请输入网址链接" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="发送内容">
                        <el-input v-model="formData.content" rows="1" type="textarea" placeholder="请输入发送的模版"
                            size="mini"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-plus">新增模版</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </header>

        <main style="transform: translateY(-10px);">
            <div style="height: 605px;">
                <el-table :data="tableData" border stripe style="width: 100%" height="100%">
                    <el-table-column fixed width="55" type="selection" align="center" />
                    <el-table-column fixed prop="id" width="70" label="ID" align="center" />
                    <el-table-column fixed prop="Area" width="100" label="区域码" align="center" />
                    <el-table-column prop="JxID" width="100" label="JxID" align="center" />
                    <el-table-column prop="JxName" width="120" label="客户名称" align="center" />
                    <el-table-column prop="userno" width="100" label="账号" align="center" />
                    <el-table-column prop="msg" width="250" label="发送内容" align="center">
                        <template slot-scope="scope">
                                <el-tooltip class="item" effect="dark" :content="scope.row.msg" placement="bottom-end">
                                    <span class="text-overflow">{{ scope.row.msg }}</span>
                                </el-tooltip>
                            </template>
                    </el-table-column>
                    <el-table-column prop="url" width="270" label="链接网址" align="center" />
                    <el-table-column prop="firstper" width="100" label="建立人" align="center" />
                    <el-table-column prop="firsttime" width="200" label="建立时间" align="center" />
                    <el-table-column prop="editer" width="150" label="修改人" align="center" />
                    <el-table-column prop="edittime" width="200" label="修改时间" align="center" />
                    <el-table-column prop="isSend" width="80" label="是否发送" align="center">
                        <template slot-scope="scope">
                            <el-checkbox v-model="scope.row.isSend" :disabled="true"></el-checkbox>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sendper" width="100" label="发送人" align="center" />
                    <el-table-column prop="sendTime" width="200" label="发送时间" align="center" />
                    <el-table-column prop="isCancel" width="100" label="是否取消" align="center">
                        <template slot-scope="scope">
                            <el-checkbox v-model="scope.row.isCancel" :disabled="true"></el-checkbox>
                        </template>
                    </el-table-column>
                    <el-table-column prop="cancelper" width="100" label="取消人" align="center" />
                    <el-table-column prop="cancelTime" width="200" label="取消时间" align="center" />
                    <el-table-column prop="clients" width="100" label="发送用户数" align="center" />
                    <el-table-column prop="clientsRead" width="100" label="用户阅读数" align="center" />
                    <el-table-column prop="expireDate" width="200" label="到期时间" align="center" />
                    <el-table-column fixed="right" label="操作" width="120" align="center">
                        <template slot-scope="scope">
                            <!--  <el-button size="mini" plain type="primary"
                                @click="handleEdit(scope.$index, scope.row)">发送模版</el-button>
                            <el-button size="mini" plain type="primary"
                                @click="handleEdit(scope.$index, scope.row)">取消发送</el-button> -->
                            <el-button size="mini" plain type="danger" @click="handleEdit(scope.$index, scope.row)"
                                class="el-icon-delete">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </main>

        <!-- 分页 -->
        <footer class="pagin">
            <el-pagination background :current-page="params.page" :page-sizes="[20, 50, 100, 150]"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" :page-size="params.pageSize" />
        </footer>
    </div>
</template>

<script>
import { adminAPI } from '@/api/adminstare'

/**
* @author        Yng
* @time          2023-11-03 11:02:01  星期五
* @description   系统通知
**/


export default {
    data() {
        return {
            formData: {
                region: '',
                JxName: '',
                AcountName: '',
                content: '',
                url: '',
                labelPosition: 'left',
            },
            total: 0,
            params: {
                action: 'sendMsgList',
                page: 1,
                pageSize: 20,
            },
            tableData: []
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.getNotice()
        })
        // this.getNotice()
    },
    methods: {
        handleEdit() { },
        handleSizeChange() { },
        handleCurrentChange() { },
        async getNotice() {
            let { code, data, total } = await adminAPI(this.params)
            if (!code) {
                this.tableData = data
                this.total = total
            }
        },
        // 一页几条数据
        handleSizeChange(val) {
            this.params.pageSize = val
            this.getNotice();
        },
        // 当前页
        handleCurrentChange(val) {
            this.params.page = val
            this.getNotice();
        },
    }

}
</script>

<style lang="scss" scoped>
header {
    &>div {
        margin-bottom: 20px;
    }

    & div:nth-child(2) {
        ::v-deep.el-form {
            display: flex;
            gap: 0 20px;
            flex-wrap: wrap;
        }
    }

}

main {
    &>div {
        height: 580px;
    }
}
</style>